// 提供复用逻辑函数（钩子）


// hooks 封装逻辑，提供响应式数据。
import { useIntersectionObserver, useIntervalFn } from '@vueuse/core'
import { ref, onUnmounted } from 'vue'
import dayjs from 'dayjs'
/*
数据懒加载函数
@param {Element} target - Dom对象
@param {Function} apiFn - API函数
*/
// 数据懒加载函数
// 方法1
// export const useLazyData = (target, apiFn) => {
//     // 需要
//     // 1. 被观察的对象
//     // 2. 不同的API函数
//     const result = ref([]);
//     // stop停止观察
//     const { stop } = useIntersectionObserver(
//             // 监听的目标对象    
//             target,
//             ([{ isIntersecting }], observerElement) => {
//                 //isIntersecting 是否进入可视区域
//                 if (isIntersecting) {
//                     // console.log('进入可视区')
//                     stop()
//                         // 调用API获取数据
//                     apiFn().then(data => {
//                         result.value = data.result
//                     })
//                 }
//             }
//         )
//         // 返回--->数据（dom,后台数据）
//     return result
// }


// 方法2直接在函数里面声明（更好）
export const useLazyData = (apiFn) => {
    // 需要
    // 1. 被观察的对象
    // 2. 不同的API函数
    const result = ref([]);
    const target = ref(null)
        // stop停止观察
    const { stop } = useIntersectionObserver(
            // 监听的目标对象    
            target,
            ([{ isIntersecting }], observerElement) => {
                //isIntersecting 是否进入可视区域
                if (isIntersecting) {
                    // console.log('进入可视区')
                    stop()
                        // 调用API获取数据
                    apiFn().then(data => {
                        result.value = data.result
                    })
                }
            },
            // 配置选项， 相交的比例大于0就触发
            {
                threshold: 0
            }
        )
        // 返回--->数据（dom,后台数据）
    return { target, result }
}


/**
 * 支付倒计时函数
 */
export const usePayTime = () => {
    // 倒计时逻辑
    const time = ref(0)
    const timeText = ref('')
    const { pause, resume } = useIntervalFn(() => {
        time.value--
            timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        if (time.value <= 0) {
            pause()
        }
    }, 1000, false)
    onUnmounted(() => {
        pause()
    })

    // 开启定时器 countdown 倒计时时间
    const start = (countdown) => {
        time.value = countdown
        timeText.value = dayjs.unix(time.value).format('mm分ss秒')
        resume()
    }

    return {
        start,
        timeText
    }
}